<template>
  <div class="div-bodys">
    <a-form slot="detail" class="div-form">
      <a-row>
        <a-col :span="5">
          <h4>问题编辑</h4>
        </a-col>
        <a-col :span="20">
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-row>
            <a-col :span="11">
              <div class="div-form-item-label">学员</div>
              <div class="div-form-item-val">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <j-search-select-tag v-decorator="['studentId']" @change="studentChange" v-model="studentId"
                                       dict="sys_user join sys_user_role  on sys_user.id = sys_user_role.user_id where  sys_user.id =sys_user_role.user_id and sys_user_role.role_id='1310705492953772034',realname,sys_user.id" />
                </a-form-item>
              </div>
            </a-col>
            <a-col :span="2"></a-col>
            <a-col :span="11">
              <div class="div-form-item-label">差点</div>
              <div class="div-form-item-val">

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <a-input-number v-decorator="['chadian']" v-model="chadian" @change="chadianChange"  placeholder="请输入差点"></a-input-number>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div class="div-form-item-label1">标题</div>
              <div class="div-form-item-val1">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <a-input v-decorator="['title']" v-model="title" @change="titleChange" placeholder="请输入问题标题"></a-input>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div class="div-form-item-label1">分类</div>
              <div class="div-form-item-val1">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <j-dict-select-tag type="list" v-model="questionTypeCode" @change="questionTypeChange" dictCode="question_type,name,id" placeholder="请选择分类" style="width: 80%; margin-right: 5%"/>
                  <a-button @click="questionTypeAdd" style="background-color: rgb(0, 160, 233); color:#000000; width: 15%;">新增</a-button>
                  <div v-for="(questionTypeItem, i) in questionTypeList" class="type-item">
                    <div class="type-item-name">{{questionTypeItem.questionTypeName}}</div>
                    <div class="type-item-c"><a-icon type="close" style="margin-left: 5px" @click="questionTypeDel(i)"></a-icon></div>
                  </div>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div class="div-form-item-label1">描述</div>
              <div class="div-form-item-val1">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <a-textarea type="textarea" v-model="description" @change="descriptionChange" v-decorator="['description']" style="height:100px;" placeholder="请输入描述"/>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div class="div-form-item-label1">标签 </div>
              <div class="div-form-item-val1">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <div class="global-search-wrapper" >
                    <a-auto-complete
                      :data-source="tagDataSource"
                      class="global-search"
                      @search="onSearch"
                      @select="onSelect"
                      @change="onTagChange"
                      size="large"
                      v-decorator="['tag']"
                      style="width: 100%"
                    >
                      <a-textarea
                        placeholder="输入关键词"
                        class="custom"
                        style="height: 50px"
                      />

                    </a-auto-complete>
                  </div>
                  <a-button @click="tagAdd" style="background-color: rgb(0, 160, 233); color:#000000; width: 15%;">新增</a-button>
                </a-form-item>
              </div>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="11">
              <div class="div-form-item-label">测试项目 </div>
              <div class="div-form-item-val">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <j-dict-select-tag type="list" v-model="testProject" :triggerChange="true" @change="testItemChange" dictCode="test_project" placeholder="请选择测试项目"/>
                </a-form-item>
              </div>
            </a-col>
            <a-col :span="2"></a-col>
            <a-col :span="11">
              <div class="div-form-item-label">测试成绩 </div>
              <div class="div-form-item-val">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <a-input v-decorator="['testResult']" v-model="testResult" @change="testResultChange" placeholder="请输入测试成绩"></a-input>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-row>
            <a-col :span="24">
              <div style="padding-left: 12px; padding-right: 12px;">
                <j-video-upload isMultiple :widthAuthIndex="0"
                                @onVideoChange="questionUpload"
                                :oneFile="true"
                                v-decorator="['vedioUrl']"
                                :initUrl="questionVideo"></j-video-upload>
              </div>
              <div style="padding-left: 12px; padding-right: 12px;overflow: auto;">
                <div v-for="(item, i) in questionVideoList" style="float: left; margin-right: 12px;margin-bottom: 12px;">
                  <video class="video-js vjs-default-skin"
                         style="z-index: 999;float:left" controls preload="none" width="100" height="100"
                         :poster="item+'?x-oss-process=video/snapshot,t_100000,f_jpg,w_800,h_600'"
                         data-setup="{}">
                    <source :src="item"/>
                  </video>
                  <a-icon type="delete" style="float:left;font-size: 20px;" @click="effectiveVedioDel(i)"/>
                </div>
              </div>
              <div></div>
              <div style="padding-left: 12px; padding-right: 12px;overflow: auto;">
                <div class="div-tag" v-for="(item, i) in tagList">{{item.tagName}}<a-icon type="close" style="margin-left: 5px" @click="tagDel(i)"></a-icon></div>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-row>
            <a-col :span="24">
              <div class="div-form-item-label1" style="width:7%;">方案 </div>
              <div class="div-form-item-val1" style="width:93%;">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <j-dict-select-tag type="list" v-model="planVideoId" @change="planVideoChange" dictCode="plan,title,id" placeholder="请选择分类" style="width: 37%; margin-right: 2%"/>
                    <a-button @click="planVideoAdd" style="background-color: rgb(0, 160, 233); color:#000000; width: 7%;">新增</a-button>
                    <div v-for="(planVideoItem, i) in planVideoList" class="type-item" style="width: 46%">
                      <div class="type-item-name">{{planVideoItem.title}}</div>
                      <div class="type-item-c"><a-icon type="close" style="margin-left: 5px" @click="planVideoDel(i)"></a-icon></div>
                    </div>
                  </a-form-item>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
          <a-row v-if="id >= 0">
            <a-col :span="12">
              <div class="div-form-item-label1">效果描述</div>
              <div class="div-form-item-val1">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <a-textarea type="textarea" v-model="effectiveDescription" @change="effectiveDescriptionChange" v-decorator="['effectiveDescription']" style="height:100px;" placeholder="请输入描述"/>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
          <a-row v-if="id >= 0">
            <a-col :span="24">
              <div class="div-form-item-label1" style="width:7%;">效果视频</div>
              <div class="div-form-item-val1" style="width:93%;">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                  <div v-for="(item, i) in effectiveVedio" style="float: left; margin-right: 12px;margin-bottom: 12px;">
                    <video class="video-js vjs-default-skin"
                           style="z-index: 999;float:left" controls preload="none" width="100" height="100"
                           :poster="item+'?x-oss-process=video/snapshot,t_100000,f_jpg,w_800,h_600'"
                           data-setup="{}">
                      <source :src="item"/>
                    </video>
                    <a-icon type="delete" style="float:left;font-size: 20px;" @click="effectiveVedioDel(i)"/>
                  </div>

                  <j-video-upload isMultiple :widthAuthIndex="0"
                                  @onVideoChange="effectiveVedioChange"
                                  :disabledFileList="1"
                                  style="float: left;"></j-video-upload>
                </a-form-item>
              </div>
            </a-col>
          </a-row>
          <a-row v-if="id >= 0">
            <a-col :span="12">
              <a-row>
                <a-col :span="11">
                  <div class="div-form-item-label">训练时长</div>
                  <div class="div-form-item-val">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input v-decorator="['trainPeriod']" v-model="trainPeriod" @change="trainPeriodChange"  placeholder="请输入训练时长(小时)"></a-input>
                    </a-form-item>
                  </div>
                </a-col>
                <a-col :span="2"></a-col>
                <a-col :span="11">
                  <div class="div-form-item-label">训练频率</div>
                  <div class="div-form-item-val">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" class="div-form-item-text">
                      <a-input v-decorator="['trainFrequency']" v-model="trainFrequency" @change="trainFrequencyChange"  placeholder="请输入训练频率(次/周)"></a-input>
                    </a-form-item>
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <div style="float: right; margin-bottom: 20px;">
            <a-button @click="questionCancel" style="background-color: #f5f5f5; width: 80px;margin-right: 10px;">取消</a-button>
            <a-button @click="questionSave" style="background-color: #00A0E9; width: 80px;">保存</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import JVideoUpload from '@/components/jeecg/JVideoUpload'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JMultiSelectTag from "@/components/dict/JMultiSelectTag"
  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
  import {questionEdit, questionPlanQuery,questionDetailsQuery, questionSave, questionTagQuery, questionTypeQuery} from '@/api/api'

  export default {
    name: "QuestionSave",
    components: {
      JVideoUpload,
      JDictSelectTag,
      JMultiSelectTag,
      JSearchSelectTag,
    },
    data() {
      return {
        tagDataSource:[],
        id: -1,
        tagName: '',
        testProject:'',
        studentId: '',
        title: '',
        chadian: '',
        description:'',
        testResult:'',
        planVideoId: '',
        planVideoTitle: '',
        planVideoList: [],
        questionTypeCode:'',
        questionTypeName:'',
        questionTypeList:[],
        tagList: [],
        planList: [],
        questionVideo: '',
        questionVideoList: [],
        effectiveDescription: '',
        effectiveVedio: [],
        trainPeriod: '',
        trainFrequency: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
      }
    },
    created:function() {
      let record = this.$route.query.id
      console.log("------------------------")
      console.log(record)
      this.loadTagData();
      if(record != undefined && record != 'undefined' && record != '') {
        console.log(record)
        this.questionDetailsLoad(record)
      }
    },
    mounted(){
    },
    methods: {
      loadTagData(){
        let that = this;
        getAction(`/tag/list`,{pageSize:10000}).then(res=>{
          if(res.success){
            for(const item in res.result.records){
              that.tagDataSource.push( res.result.records[item].name);

            }
          }
        })


      },
      onSearch(){

      },
      onTagChange(s){
        this.tagName = s;
      },
      onSelect(s){
      },
      //键盘事件
      keyPress(ev) {

      },
      //差点
      chadianChange(v) {
        this.chadian = v.target.value
      },
      //标题
      titleChange(v) {
        this.title = v.target.value
      },
      //备注
      descriptionChange(v) {
        this.description = v.target.value
      },
      testResultChange(v) {
        this.testResult = v.target.value
      },
      // 效果描述
      effectiveDescriptionChange(v) {
        this.effectiveDescription = v.target.value
      },
      //训练时长
      trainPeriodChange(v) {
        this.trainPeriod = v.target.value
      },
      //训练频率
      trainFrequencyChange(v) {
        this.trainFrequency = v.target.value
      },
      // 标签事件
      tagAdd() {
        if(!this.tagName) {
          this.$message.error('请输入标签名称');
          return
        }
        for(var i  = 0; i < this.tagList.length; i++) {
          if(this.tagList[i].tagName == this.tagName) {
            this.$message.error("请勿重复输入标签")
            return
          }
        }
        var tagItem = {
          'id' : -1,
          'tagName': this.tagName
        }
        this.tagList.push(tagItem)
      },
      tagDel(v) {
        this.tagList.splice(v, 1)
      },

      stopF5Refresh() {
        document.onkeydown = function (e) {
          var evt = window.event || e;
          var code = evt.keyCode || evt.which;
          if (code == 116) {
            if (evt.preventDefault) {
              evt.preventDefault();
            } else {
              evt.keyCode = 0;
              evt.returnValue = false
            }
          }
        }
      },
      questionTagLoad() {
        var paramter = {
          id: this.id
        }
        questionTagQuery(paramter).then(res=>{
          if(res.code == 200) {
            for(var i = 0; i < res.result.length; i++) {
              var item = res.result[i]
              var tagItem = {
                'id' : item.id,
                'tagName': item.tagName
              }
              this.tagList.push(tagItem)
            }
          }
        })
      },
      // 测试项目
      testItemChange(v, d) {
        this.testProject = v
      },
      // 方案时评上传
      planVideoChange(v, e) {
        this.planVideoId = v
        this.planVideoTitle = e
      },
      planVideoAdd() {
        if(!this.checkParamter(this.planVideoTitle)) {
          this.$message.error("请选择方案")
          return
        }
        for(var i  = 0; i < this.planVideoList.length; i++) {
          if(this.planVideoList[i].planId == this.planVideoId) {
            this.$message.error("请勿重复选择方案")
            return
          }
        }
        var paramter = {
          id: '',
          planId: this.planVideoId,
          title: this.planVideoTitle
        }
        this.planVideoList.push(paramter)
      },
      planVideoDel(v) {
        this.planVideoList.splice(v, 1)
      },
      questionDetailsLoad(v) {
        var that = this
        var paramter = {
          id: v
        }
        questionDetailsQuery(paramter).then(res=>{
          if(res.code == 200) {
            var record = res.result.records[0]
            console.log(record)
            that.title = record.title
            that.id = record.id
            that.chadian = record.chadian
            that.studentId = record.trainee
            that.description = record.description
            that.testProject = record.testProject
            that.testResult = record.testResult
            that.questionVideoList = record.vedioUrl.split(',')
            that.effectiveDescription = record.effectiveDescription
            that.trainPeriod = record.trainPeriod
            that.trainFrequency = record.trainFrequency
            if(record.effectiveVedio != '' && record.effectiveVedio != null && record.effectiveVedio != undefined && record.effectiveVedio != 'undefined'){
              that.effectiveVedio = record.effectiveVedio.split(',')
            }
            // 加载标签
            that.questionTagLoad()
            // 加载方案
            that.questionPlanLoad()
            // 加载分类
            that.questionTypeLoad()
          }
        })
      },
      questionPlanLoad() {
        var paramter = {
          id: this.id
        }
        questionPlanQuery(paramter).then(res=>{
          if(res.code == 200) {
            for(var i = 0; i < res.result.length; i++) {
              var item = res.result[i]
              var paramter = {
                id: item.id,
                planId: item.planId,
                title: item.questionPlanName
              }
              this.planVideoList.push(paramter)
            }
          }
        })
      },
      // 问题时评
      questionUpload(path) {
        console.log("-----------------------------------")
        if(path != '' && path != undefined && path != 'undefined') {
          this.questionVideo = path
          this.questionVideoList.push(path)
        }
        console.log(path)
        console.log(this.questionVideoList)
        console.log("-----------------------------------")
      },
      //学员选择
      studentChange(e, v) {
        this.studentId = e
      },
      //分类
      questionTypeChange(e, v) {
        this.questionTypeName = v
        this.questionTypeCode = e
      },
      questionTypeAdd() {
        if(!this.checkParamter(this.questionTypeName)) {
          this.$message.error('请选择分类')
          return
        }
        for(var i  = 0; i < this.questionTypeList.length; i++) {
          if(this.questionTypeList[i].questionTypeId == this.questionTypeCode) {
            this.$message.error("请勿重复选择分类")
            return
          }
        }
        var item = {
          'id': '',
          'questionTypeId': this.questionTypeCode,
          'questionTypeName': this.questionTypeName
        }
        this.questionTypeList.push(item)
      },
      questionTypeDel(v) {
        this.questionTypeList.splice(v, 1)
      },
      questionTypeLoad() {
        var paramter = {
          id: this.id
        }
        questionTypeQuery(paramter).then(res=>{
          if(res.code == 200) {
            for(var i = 0; i < res.result.length; i++) {
              var item = res.result[i]
              var paramter = {
                'id': item.id,
                'questionTypeId': item.questionTypeId,
                'questionTypeName': item.questionTypeName
              }
              this.questionTypeList.push(paramter)
            }
          }
        })
      },
      //效果视频上传
      effectiveVedioChange(path) {
        this.effectiveVedio.push(path)
      },
      effectiveVedioDel(i) {
        this.effectiveVedio.splice(i, 1)
      },
      //取消
      questionCancel() {
        this.$router.push({path: "/question/question", query:{closeRout: '/question/edit'}})
      },
      beforeunloadHandler (e) {
        e = e || window.event
        if (e) {
          e.returnValue = '关闭提示'
        }
        return '关闭提示'
      },
      //保存
      questionSave() {
        //校验参数
        if(!this.checkParamter(this.title)) {
          this.$message.error("标题为空")
          return
        }
        // 学员
        if(!this.checkParamter(this.studentId)) {
          this.$message.error("请选择一个学员")
          return
        }

        var uestionTypeListeParamter = []
        for(var i = 0; i < this.questionTypeList.length; i++){
          var item = this.questionTypeList[i]
          this.$delete(item,'questionTypeName')
          uestionTypeListeParamter.push(item);
        }

        var that = this
        if(this.id == -1) {
          var paramter = {
            title: this.title,
            trainee: this.studentId,
            chadian: this.chadian,
            questionTypeMappingList: uestionTypeListeParamter,
            description: this.description,
            tagMappingList: this.tagList,
            myQuestionPlanList: this.planVideoList,
            testProject: this.testProject,
            testResult: this.testResult,
            vedioUrl: this.questionVideoList.join(',')
          }
          questionSave(paramter).then(res=>{
            if(res.code == 200) {
              that.$message.success("操作成功")
              that.questionCancel()
            }else {
              that.$message.success(res.message)
            }
          })
        }else {
          var paramter = {
            id: this.id,
            title: this.title,
            trainee: this.studentId,
            chadian: this.chadian,
            questionTypeMappingList: uestionTypeListeParamter,
            description: this.description,
            tagMappingList: this.tagList,
            myQuestionPlanList: this.planVideoList,
            testProject: this.testProject,
            testResult: this.testResult,
            vedioUrl: this.questionVideoList.join(','),
            effectiveVedio: this.effectiveVedio.join(','),
            effectiveDescription: this.effectiveDescription,
            trainPeriod: this.trainPeriod,
            trainFrequency: this.trainFrequency
          }
          questionEdit(paramter).then(res=>{
            if(res.code == 200) {
              that.$message.success("操作成功")
              that.questionCancel()
            }else {
              that.$message.success(res.message)
            }
          })
        }

      },
      checkParamter(v) {
        v=v.replace( /^\s*/, '');
        if(v == undefined || v == 'undefined' || v == ''){
          return false;
        }
        return true;
      }
    }
  }
</script>

<style scoped>
  .div-bodys{
    background-color: #fff;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .dib-h4{

  }
  .div-form{
    padding-left: 12px;
    padding-right: 12px;
  }
  .div-form-item-label {
    width: 30%;
    text-align: left;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 38px;
    float: left;
  }
  .div-form-item-val {
    width: 70%;
    float: right;
  }
  .div-form-item-label1 {
    width: 14%;
    text-align: left;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 38px;
    float: left;
  }
  .div-form-item-val1 {
    width: 86%;
    float: right;
  }
  .div-tag {
    float: left;
    margin-right: 10px;
    padding-left: 8px;
    padding-right: 5px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
  }
  .type-item{
    width:100%;
    line-height: 32px;
    height: 32px;
    font-size: 12px;
    margin-bottom: 5px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
  }
  .type-item-name{
    width:95%;
    float: left;
    text-align: center;
  }
  .type-item-c{
    width:5%;
    float: right;
  }
</style>